<div class="row">
  <div class="col-md-12">
    <div class="portlet">
      <div class="portlet-title">
        <div class="caption">
          <i class="{{$root.currentMenu.icon}}"></i>{{$root.currentMenu.menuName}}
        </div>
        <div class="tools">
          <a href="javascript:;" class="collapse"></a>
        </div>
        <div class="actions">
          <a href="javascript:;" class="btn default yellow-stripe" id="addUser"><i
            class="fa fa-plus-square-o"></i><span class="hidden-480"> {{'new'|translate}}</span></a>
          <a href="javascript:;" class="btn default yellow-stripe" id="dataTableReload"><i
            class="fa fa-refresh"></i><span class="hidden-480"> {{'refresh'|translate}}</span></a>

          <div class="btn-group">
            <a class="btn default yellow-stripe" href="#" data-toggle="dropdown">
              <i class="fa fa-list"></i>
              <span class="hidden-480">{{'columns'|translate}}</span>
              <i class="fa fa-angle-down"></i>
            </a>

            <div class="dropdown-menu hold-on-click dropdown-checkboxes pull-right"
                 id="dataTableToggleColumn">
              <label><input type="checkbox" checked="checked" data-column="0">{{'username'|translate}}</label>
              <label><input type="checkbox" checked="checked" data-column="1">{{'nickname'|translate}}</label>
              <label><input type="checkbox" checked="checked" data-column="2">{{'actions'|translate}}</label>
            </div>
          </div>
        </div>
      </div>
      <div class="portlet-body">
        <div class="table-container">
          <table class="table table-striped table-bordered table-hover" id="dataTable">
            <thead>
            <tr role="row" class="heading">
              <th>{{'username'|translate}}</th>
              <th>{{'nickname'|translate}}</th>
              <th>{{'username'|translate}}</th>
            </tr>
            <tr role="row" class="filter">
              <td>
                <input type="text" class="form-control form-filter input-sm"
                       data-gautoflag="gAutoUsername" name="usernameQuery" id="usernameQuery" placeholder="{{'username'|translate}}">
              </td>
              <td>
                <input type="text" class="form-control form-filter input-sm"
                       data-gautoflag="gAutoNickname" name="nicknameQuery" id="nicknameQuery" placeholder="{{'nickname'|translate}}">
              </td>
              <td>
                <div class="margin-bottom-5">
                  <a class="btn btn-sm yellow filter-submit margin-bottom">
                    <i class="fa fa-search"></i>{{'query'|translate}}</a>
                </div>
              </td>
            </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
